<script lang="ts" setup>
import { watch, ref } from 'vue';
import { message, Card } from 'ant-design-vue';
import { getTrack, getAiDutyStatusRecordsPage } from '#/api/moxi/aiDutyStatusRecords';
// import { getAiDutyStatusRecordsPage } from '#/api/moxi/comprehensiveStaffinfo';
import dayjs, { Dayjs } from 'dayjs';
const open = ref<boolean>(false);

// 定义 props 接收 id
const props = defineProps<{
    formData?: any;
}>();

const timelineData = ref<any>({});

// 获取年月日
const getYMD = (date: any) => {
    return dayjs(date).format('YYYY年MM月DD日');
};
//获取时分秒
const getHMS = (date: any) => {
    return dayjs(date).format('HH:mm:ss');
};
const currentVideoUrl = ref('');
const handleDetail = (videoUrl: any) => {
    currentVideoUrl.value = videoUrl; // 设置当前视频URL
    open.value = true;
};


// 定义搜索关键词的响应式变量
const searchKeyword = ref<any[]>([]);;
const handleSearch = async () => {
    if (searchKeyword.value.length > 0 && searchKeyword.value[0] && searchKeyword.value[1]) {
        console.log('获取id: ', props.formData.userid);
        console.log('执行搜索，关键词: ', searchKeyword.value);
        // 查询轨迹
        const res = await getTrack({ userid: props.formData.userid, startTime: searchKeyword.value[0], endTime: searchKeyword.value[1] });
        if (res) {
            timelineData.value = res;
            message.success('查询成功');
        }
        // 查询列表
        const params = {
            pageNo: 1,
            pageSize: 100,
            deptId: props.formData.searchDeptId,
            userid: props.formData.userid,
            startTime: dayjs(searchKeyword.value[0]).format('YYYY-MM-DD HH:mm:ss') + ',' + dayjs(searchKeyword.value[1]).format('YYYY-MM-DD HH:mm:ss'),
            type: 1
        };
        const resOffDuty = await getAiDutyStatusRecordsPage(params);
        if (resOffDuty) {
            offData.value = resOffDuty.list;
        }
    } else {
        message.warning('请选择查询时间');
    }
};

type RangeValue = [Dayjs, Dayjs];
const rangePresets = ref([
    { label: '最近一天', value: [dayjs().add(-1, 'd'), dayjs()] },
    { label: '最近7天', value: [dayjs().add(-7, 'd'), dayjs()] },
]);
const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
    if (dates) {
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
        const timestamps = dateStrings.map(dateStr => {
            return new Date(dateStr).getTime();
        });
        searchKeyword.value = timestamps;
    }
};

const offData = ref<any[]>([]);
const offColumns = [
    {
        title: '序号',
        dataIndex: 'id',
    },
    {
        title: '员工姓名',
        dataIndex: ['employee', 'name'],
    },
    {
        title: '所属部门',
        dataIndex: ['employee', 'deptNames'],
    },
    {
        title: '在岗开始时间',
        dataIndex: 'startTime',
        customRender: ({ text }: { text: any }) => {
            if (!text) return '-';
            return dayjs(text).format('YYYY-MM-DD HH:mm')
        }
    },
    {
        title: '在岗结束时间',
        dataIndex: 'endTime',
        customRender: ({ text }: { text: any }) => {
            if (!text) return '-';
            return dayjs(text).format('YYYY-MM-DD HH:mm')
        }
    },
    {
        title: '在岗时长',
        dataIndex: 'mobile',
        customRender: ({ record }: { record: any }) => {
            if (!record || record === 0) return '-';
            return dayjs(record.endTime).diff(dayjs(record.startTime), 'hour') + 'h'
        }
    },
    // {
    //     title: '操作',
    //     dataIndex: 'operation',
    //     slots: { customRender: 'operation' }
    // },
];

// const handleEdit = (record:any,) => {
//     console.log('编辑:', record);
//     open.value = true;  // 打开抽屉
// };
</script>
<template>
    <div class="h-full p-4">
        <div>
            <Card class="mr-4">
                <form @submit.prevent="handleSearch">
                    <div class="search-input-group">
                        <a-range-picker style="width: 400px" show-time format="YYYY-MM-DD HH:mm:ss"
                            :presets="rangePresets" @change="onRangeChange" />
                        <a-button type="primary" html-type="submit" style="margin-left:10px"> 搜索 </a-button>
                    </div>
                </form>
            </Card>
        </div>
        <Card class="mr-4">
            <template #title>
                <div class="flex items-center">
                    <span class="ml-2 text-lg font-medium">在岗记录</span>
                </div>
            </template>
            <a-table size="small" :columns="offColumns" :data-source="offData" bordered>
                <!-- <template #operation="{ record }">
                    <a-button type="link" size="small" @click="handleEdit(record)">
                        详情
                    </a-button>
                </template> -->
            </a-table>
        </Card>
        <Card class="mr-4" style="margin-top: 10px;" v-if="timelineData && Object.keys(timelineData).length > 0">
            <template #title>
                <div class="flex items-center">
                    <span class="ml-2 text-lg font-medium">员工轨迹</span>
                </div>
            </template>
            <a-timeline>
                <a-timeline-item v-for="(item, date) in timelineData" :key="date" color="#1890ff">
                    <div class="timeline-card" :style="{ borderTop: `3px solid #1890ff` }">
                        <div class="card-header">
                            <span class="date font18 font-bold">{{ date }}</span>
                        </div>
                        <div v-for="(val, index) in item" :key="index">
                            <a-descriptions :column="1" size="small" layout="horizontal">
                                <a-descriptions-item label="目标名称">
                                    <span style="font-weight: bold;">{{ val.className }}</span>
                                </a-descriptions-item>
                                <a-descriptions-item label="人员名称">
                                    {{ val.personName }}
                                </a-descriptions-item>
                                <a-descriptions-item label="摄像头名称">
                                    {{ val.streamNickname }}
                                </a-descriptions-item>
                                <a-descriptions-item label="时间">
                                    {{ getHMS(val.alarmTime) }}
                                </a-descriptions-item>
                                <!-- <a-descriptions-item label="头像">
                                    <a-image :width="200" :src="val.imageUrl" />
                                </a-descriptions-item> -->
                            </a-descriptions>
                            <div class="card-footer">
                                <a-button type="text" size="small" @click="handleDetail(val.videoUrl)">
                                    查看详情
                                </a-button>
                            </div>
                        </div>
                    </div>
                </a-timeline-item>
            </a-timeline>
        </Card>
        <div class="mt-5 flex h-64 items-center justify-center rounded-lg" v-else>
            <div class="text-center text-gray-500">
                <p class="text-lg font-medium">暂无数据</p>
            </div>
        </div>
        <a-modal v-model:open="open" title="访客轨迹视频" width="800px" :footer="null" height="600px">
            <video width="720" height="580" controls="controls" :src="currentVideoUrl">
            </video>
        </a-modal>
    </div>
</template>

<style scoped>
.search-container {
    padding: 20px;
    background-color: #f0f2f5;
    border-radius: 4px;
}

.search-input-group {
    display: flex;
    align-items: center;
}

.timeline-wrapper {
    padding: 40px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
}

.custom-dot {
    display: flex;
    width: 24px;
    height: 24px;
    border: 3px solid;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: white;
}

.timeline-card {
    padding: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.date {
    color: #666;
    font-size: 14px;
}

h3 {
    margin: 8px 0;
    color: #333;
}

.content {
    color: #666;
    line-height: 1.6;
}

.card-footer {
    margin-top: 16px;
    text-align: right;
}

.font-bold {
    font-weight: bold;
}

.font18 {
    font-size: 18px;
}
</style>
